<template>
  <div>
    <!-- 导航 -->
		<div class="Navigation">		
        <el-col :span="24">
        <el-menu
          :default-active="currentNo"
          class="el-menu-vertical-demo"
          :unique-opened="true"
          @select="hanglerSelect">
          <el-menu-item class="menuItem" index="Home" @click="jumpPage($event.index)">
            <i class="el-icon-house"></i>
            <span slot="title"><router-link to="/vocational/Home"> 主页</router-link></span>
          </el-menu-item>
          <el-menu-item class="menuItem" index="Booking" @click="jumpPage($event.index)">
            <i class="el-icon-date"></i>
            <span slot="title"><router-link to="/vocational/Booking">实验室预约管理</router-link></span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>实验室设备管理</span>
            </template>
              <el-menu-item class="menuItem" index="EquipmentSearch" @click="jumpPage($event.index)">
                <i class="el-icon-search"></i>
                <span slot="title">
                  <router-link to="/vocational/EquipmentSearch">教室设备查询</router-link>
                </span>
              </el-menu-item>
              <el-menu-item class="menuItem" index="EquipmentRepair" @click="jumpPage($event.index)">
                <i class="el-icon-position"></i>
                <span slot="title">
                  <router-link to="/vocational/EquipmentRepair">设备报修</router-link>
                </span>
              </el-menu-item>
          </el-submenu>
          <el-menu-item class="menuItem" index="ProjectApply" @click="jumpPage($event.index)">
            <i class="el-icon-document-add"></i>
            <span slot="title">
              <router-link to="/vocational/ProjectApply">科研项目申请</router-link>
            </span>
          </el-menu-item>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>统计管理</span>
            </template>
              <el-menu-item class="menuItem" index="BookingRecord"  @click="jumpPage($event.index)">
                <i class="el-icon-document-copy"></i>
                <span slot="title">
                  <router-link to="/vocational/BookingRecord" >实验室预约记录</router-link>
                </span>
              </el-menu-item>
              <el-menu-item class="menuItem" index="ProjectStatistics"  @click="jumpPage($event.index)">
                <i class="el-icon-pie-chart"></i>
                <span slot="title">
                  <router-link to="/vocational/ProjectStatistics" >科研项目统计</router-link>
                </span>
              </el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>
              <el-menu-item class="menuItem" index="_notice" @click="jumpPage($event.index)">
                <i class="el-icon-data-board"></i>
                <span slot="title">
                  <router-link to="/setting/_noticeManage">公告管理</router-link>
                </span>
              </el-menu-item>
              <el-menu-item class="menuItem" index="_room" @click="jumpPage($event.index)">
                <i class="el-icon-office-building"></i>
                <span slot="title">
                  <router-link to="/setting/_roomManage">教室管理</router-link>
                </span>
              </el-menu-item>
              <el-menu-item class="menuItem" index="_equipment" @click="jumpPage($event.index)">
                <i class="el-icon-monitor"></i>
                <span slot="title">
                  <router-link to="/setting/_equipmentManage">设备管理</router-link>
                </span>
              </el-menu-item>
              <el-menu-item class="menuItem" index="_project" @click="jumpPage($event.index)">
                <i class="el-icon-tickets"></i>
                <span slot="title">
                  <router-link to="/setting/_projectManage">项目管理</router-link>
                </span>
              </el-menu-item>
              <el-menu-item class="menuItem" index="_purview" @click="jumpPage($event.index)">
                <i class="el-icon-s-custom"></i>
                <span slot="title">
                  <router-link to="/setting/_purviewManage">账号管理</router-link>
                </span>
              </el-menu-item>
          </el-submenu>

         
        </el-menu>
        </el-col>
      <!-- 侧边分割线 -->
      <div class="cut"></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'Navigation',
  data(){
    return{
      currentNo:"1"
    }
  },
  methods:{
    hanglerSelect(keyPath){
      sessionStorage.setItem("navigationNo",keyPath)
    },
    getIndex($event){
      console.log($event.index)
    },
    jumpPage(pathName){
      this.$router.push({
        name:pathName
      })
    }
  },
  mounted(){
    if(window.name == ""){
      window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 
    }else if(window.name == "isReload"){
      if(sessionStorage.getItem("navigationNo")!==undefined){
        this.currentNo=sessionStorage.getItem("navigationNo");
      }
    }
  }
}
</script>

<style scoped lang="css">
  /*导航区*/
  .Navigation{
				left: 0px; 
				width: 18%; 
				position: absolute; 
				height: 100%; 
				overflow:auto;
			}
  .cut{
    position: absolute; 
    top : 0px; 
    right: 0px; 
    width: 1px; 
    bottom: 0; 
    background-color: #B3B3B3;
  }
</style>